<template>
	<view class="container">
		<!-- LOGO -->
		<view class="img-wrap"></view>
		<!-- 按钮区 -->
		<view class="button-area">
			<view class="button-wrap">
				<!-- 微信登录 -->
				<button class="button-login" open-type="getPhoneNumber" @getphonenumber="getUserPhone">
					<text class="wx-login loginText">{{wxLogin}}</text>
				</button>
				<!-- <view class="button-login">
						<text class="wx-login loginText" @click="wxToAccountLogin">{{wxLogin}}</text>
					</view> -->
				<!-- 账号登录 -->
				<button class="button-login1" @click="navigateToAccountLogin">
					<text class="wx-login loginText1">{{accountLogin}}</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '环测链',
				wxLogin: '微信登录',
				accountLogin: '手机登录'
			}
		},
		methods: {
			navigateToAccountLogin() {
				wx.navigateTo({
					url: '/pages/logs/logs'
				})
			},
			getUserPhone(e) {
				if (e.detail.code) {
					const {
						encryptedData,
						iv,
						code
					} = e.detail;
					const openId = this.$db.get('openid')
					const sessionKey = this.$db.get('session_key')
					const params = {
						encryptedData,
						iv,
						openId,
						sessionKey
					}
					this.$api.doLogin(params, async res => {
						if (res.success) {
							this.$db.set('userToken', res.result);
							this.$db.set('TOKEN', res.result);
							await this.getUserInfo();
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
							})
						}
					})
				} else {
					uni.showToast({
						title: '登录授权失败',
						icon: 'none',
					})
				}

			},
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #fafafc;
	}

	.img-wrap {
		height: 30%;
		text-align: center;
		background: #333d8b;
		background-image: url('../../static/yd.png');
		background-size: 100% 100%;
	}

	.logo {
		height: 275rpx;
		height: 275rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 67rpx;
		color: #193566;
		letter-spacing: 10rpx;
	}

	.button-area {
		width: 100%;
		height: 137rpx;
		margin-top: 20%;
		display: flex;
	}

	.button-wrap {
		height: 137rpx;
		display: flex;
		flex: 1;
		justify-content: space-between;
	}

	.button-login {
		width: 243rpx;
		height: 110rpx;
		border-radius: 9rpx;
		color: #4caf79;
		background: #d8d9e1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.button-login1 {
		width: 243rpx;
		height: 110rpx;
		border-radius: 9rpx;
		background: #495397;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loginText {
		margin-left: 6rpx;
		color: #4caf79;
		font-size: 35rpx;
	}

	.loginText1 {
		margin-left: 6rpx;
		color: #fff;
		font-size: 35rpx;
	}

	.bg-tree {
		position: absolute;
		bottom: 9%;
		left: 5%;
		/* background-image: url(../../static/bg-tree.svg); */
		/* background-position: 40% 50%; */
		width: 100%;
		height: 0;
		padding-top: 69%;
		background-repeat: no-repeat;
		background-size: 140% 140%;
	}
</style>